const {
  override,
  fixBabelImports,
  addLessLoader,
  addWebpackAlias,
  overrideDevServer,
} = require("customize-cra");
const path = require("path");
// const webpack = require("webpack")

function resolve(dir) {
  return path.join(__dirname, dir);
}
process.env.CI = "false";
const addCustomize = () => (config) => {
  if (config.resolve) {
    config.resolve.extensions.push(".jsx");
  }
  return config;
};

// 开发环境配置代理
const devServerConfig = () => (config) => {
  return {
    ...config,
    proxy: {
      "/dev-api": {
        target: "http://134.122.133.76:8099",
        changeOrigin: true,
        pathRewrite: {
          // 这种接口配置出来     http://XX.XX.XX.XX:8083/login
          "^/dev-api": "/",
        },
        secure: false,
      },
    },
  };
};

module.exports = {
  webpack: override(
    // 针对antd实现按需打包: 根据import来打包(使用babel-plugin-import)
    fixBabelImports("import", {
      libraryName: "antd",
      libraryDirectory: "es",
      style: true, // 自动打包相关的样式
    }),

    // 使用less-loader对源码中的less的变量进行重新指定
    addLessLoader({
      javascriptEnabled: true,
      modifyVars: {
        hack: 'true; @import "~@/styles/vars.less";', //全局less变量
        "@primary-color": "#69009d", // 浅紫
        "@body-background": "#fcf6ff",
        "@layout-body-background": "#fcf6ff",
        "@layout-header-height": "60px",
        "@layout-header-color": "#fcf6ff", // 头部文字颜色
        "@layout-header-background": "#69009d", // 头部颜色
        "@layout-sider-background": "#510079", // sidebar背景色 深紫色
        "@menu-icon-size": "16px",
        "@breadcrumb-base-color": "#fcf6ff", // 面包屑
        "@table-header-bg": '#69009d', // 表格表头颜色
        "@table-header-color": '#fcf6ff', 
        "@table-padding-vertical": '5px', // 表格纵向padding
      },
    }),

    // 配置路径别名
    addWebpackAlias({
      "@": resolve("src"),
    }),
    addCustomize()
  ),
  devServer: overrideDevServer(devServerConfig()),
};
